<template>
	<view class="box">
		<view class="userInfo">
			<avatar class="avatar" src="" mode=""></avatar>
			<view class="info">
				<view class="name">
					XXX
				</view>
				<view class="id">
					云ID:131447
				</view>
			</view>
			<i-icon class="gdIcon" icon="icon-gengduo"></i-icon>
		</view>
		
		<view class="tab">
			<view class="tabItem">
				设置
			<i-icon class="gdIcon" icon="icon-gengduo"></i-icon>
			</view>
			<view class="tabItem">
				关于
			<i-icon class="gdIcon" icon="icon-gengduo"></i-icon>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			};
		}
	}
</script>

<style scoped>
.box{
	background-color: #f8f8f8;
	font-family: "楷体";
	height: 100vh;
}
.userInfo{
	background-color: #fff;
	display: flex;
	flex-direction: row;
	align-items: center;
	padding: 10px;
	border-bottom: 1px solid #c4c4c4;
}
.avatar{
	width:80px;height: 80px; border-radius:50%;border: 1px solid #c4c4c4;
}
.info{
	padding-left: 20px;
}
.userInfo .name{
	font-size: 14px;
	line-height: 1.5em;
	font-weight: bold;
	position: relative;
}
.gdIcon{
	position: absolute;
	right: 10px;
    font-size: 1.5em;
}
.userInfo .id{
	font-size: 12px;
	line-height: 1.5em;
	color:#818181;
}
.tab{
	margin-top:20px;
	background-color: #fff;
	padding:0 0 0 20px;
}
.tabItem{
	display: flex;
	flex-direction: row;
	align-items: center;
	position: relative;
	border-bottom: 1px solid #c4c4c4;
	padding: 10px 0;
}
.tab .tabItem:last-child{
	border-bottom: 0;
}
</style>
